<template>
  <div class="login-form-demo-page">
    <!-- 页面标题 -->
    <div class="hero bg-base-200 rounded-3xl mb-8">
      <div class="hero-content text-center">
        <div class="max-w-md">
          <h1 class="text-5xl font-bold mb-4">🔐</h1>
          <h2 class="text-3xl font-bold text-base-content mb-4">LoginForm 组件演示</h2>
          <p class="text-base-content/70 mb-6">登录表单业务组件，提供完整的登录功能和自定义选项</p>
          <div class="flex flex-wrap gap-2 justify-center">
            <div class="badge badge-primary">Vue 3</div>
            <div class="badge badge-secondary">TypeScript</div>
            <div class="badge badge-accent">表单验证</div>
            <div class="badge badge-neutral">社交登录</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 演示区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 左侧：演示控制 -->
      <div class="space-y-6">
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title">🎛️ 演示控制</h3>

            <!-- 基础配置 -->
            <div class="form-control">
              <label class="label">
                <span class="label-text">用户名标签</span>
              </label>
              <input
                v-model="formConfig.usernameLabel"
                type="text"
                class="input input-bordered"
                placeholder="请输入用户名标签"
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">密码标签</span>
              </label>
              <input
                v-model="formConfig.passwordLabel"
                type="text"
                class="input input-bordered"
                placeholder="请输入密码标签"
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">提交按钮文本</span>
              </label>
              <input
                v-model="formConfig.submitText"
                type="text"
                class="input input-bordered"
                placeholder="请输入提交按钮文本"
              />
            </div>

            <!-- 功能开关 -->
            <div class="space-y-3">
              <h4 class="font-semibold text-base-content">功能开关</h4>

              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    v-model="formConfig.showRememberMe"
                    type="checkbox"
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">显示记住我</span>
                </label>
              </div>

              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    v-model="formConfig.showForgotPassword"
                    type="checkbox"
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">显示忘记密码</span>
                </label>
              </div>

              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    v-model="formConfig.showSocialLogin"
                    type="checkbox"
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">显示社交登录</span>
                </label>
              </div>

              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    v-model="formConfig.showGoogleLogin"
                    type="checkbox"
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">显示Google登录</span>
                </label>
              </div>

              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    v-model="formConfig.showGithubLogin"
                    type="checkbox"
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">显示GitHub登录</span>
                </label>
              </div>

              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    v-model="formConfig.showRegisterLink"
                    type="checkbox"
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">显示注册链接</span>
                </label>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="card-actions justify-end mt-6">
              <button @click="simulateError" class="btn btn-error btn-sm" :disabled="formLoading">
                <span class="mr-2">⚠️</span>
                模拟错误
              </button>
              <button @click="clearError" class="btn btn-warning btn-sm" :disabled="formLoading">
                <span class="mr-2">🧹</span>
                清除错误
              </button>
            </div>
          </div>
        </div>

        <!-- 预设示例 -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title">📋 预设示例</h3>
            <div class="grid grid-cols-2 gap-3">
              <button
                v-for="preset in presets"
                :key="preset.name"
                @click="loadPreset(preset)"
                class="btn btn-outline btn-sm"
              >
                {{ preset.icon }} {{ preset.name }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：表单演示 -->
      <div class="space-y-6">
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title">📝 表单演示</h3>

            <!-- LoginForm 组件 -->
            <div class="max-w-md mx-auto">
              <LoginForm
                ref="loginFormRef"
                :username-label="formConfig.usernameLabel"
                :username-placeholder="formConfig.usernamePlaceholder"
                :username-icon="formConfig.usernameIcon"
                :password-label="formConfig.passwordLabel"
                :password-placeholder="formConfig.passwordPlaceholder"
                :password-icon="formConfig.passwordIcon"
                :show-remember-me="formConfig.showRememberMe"
                :remember-me-text="formConfig.rememberMeText"
                :show-forgot-password="formConfig.showForgotPassword"
                :forgot-password-text="formConfig.forgotPasswordText"
                :show-social-login="formConfig.showSocialLogin"
                :show-google-login="formConfig.showGoogleLogin"
                :show-github-login="formConfig.showGithubLogin"
                :show-register-link="formConfig.showRegisterLink"
                :register-prefix-text="formConfig.registerPrefixText"
                :register-text="formConfig.registerText"
                :submit-text="formConfig.submitText"
                :loading-text="formConfig.loadingText"
                :loading="formLoading"
                @submit="handleFormSubmit"
                @forgot-password="handleForgotPassword"
                @google-login="handleGoogleLogin"
                @github-login="handleGithubLogin"
                @register="handleRegister"
              />
            </div>
          </div>
        </div>

        <!-- 代码预览 -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title">💻 代码预览</h3>
            <div class="mockup-code">
              <pre><code>{{ formCode }}</code></pre>
            </div>
          </div>
        </div>

        <!-- 事件日志 -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title">📝 事件日志</h3>
            <div class="space-y-2 max-h-60 overflow-y-auto">
              <div
                v-for="(log, index) in eventLogs"
                :key="index"
                class="alert alert-sm"
                :class="getLogClass(log.type)"
              >
                <span class="text-xs">{{ log.time }}</span>
                <span class="text-xs font-mono">{{ log.message }}</span>
              </div>
            </div>
            <button @click="clearLogs" class="btn btn-ghost btn-sm mt-3">清空日志</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { LoginForm } from '@/components/common/login'

defineOptions({
  name: 'LoginFormDemoPage',
})

// 表单引用
const loginFormRef = ref()

// 表单加载状态
const formLoading = ref(false)

// 表单配置
const formConfig = reactive({
  usernameLabel: '用户名或邮箱',
  usernamePlaceholder: '请输入用户名或邮箱',
  usernameIcon: '👤',
  passwordLabel: '密码',
  passwordPlaceholder: '请输入密码',
  passwordIcon: '🔒',
  showRememberMe: true,
  rememberMeText: '记住我',
  showForgotPassword: true,
  forgotPasswordText: '忘记密码？',
  showSocialLogin: true,
  showGoogleLogin: true,
  showGithubLogin: true,
  showRegisterLink: true,
  registerPrefixText: '还没有账号？',
  registerText: '立即注册',
  submitText: '登录',
  loadingText: '登录中...',
})

// 事件日志
const eventLogs = ref<Array<{ time: string; message: string; type: string }>>([])

// 预设配置
const presets = [
  {
    name: '基础',
    icon: '📝',
    config: {
      usernameLabel: '用户名或邮箱',
      usernamePlaceholder: '请输入用户名或邮箱',
      usernameIcon: '👤',
      passwordLabel: '密码',
      passwordPlaceholder: '请输入密码',
      passwordIcon: '🔒',
      showRememberMe: true,
      rememberMeText: '记住我',
      showForgotPassword: true,
      forgotPasswordText: '忘记密码？',
      showSocialLogin: true,
      showGoogleLogin: true,
      showGithubLogin: true,
      showRegisterLink: true,
      registerPrefixText: '还没有账号？',
      registerText: '立即注册',
      submitText: '登录',
      loadingText: '登录中...',
    },
  },
  {
    name: '简洁',
    icon: '🎯',
    config: {
      usernameLabel: '用户名',
      usernamePlaceholder: '请输入用户名',
      usernameIcon: '👤',
      passwordLabel: '密码',
      passwordPlaceholder: '请输入密码',
      passwordIcon: '🔒',
      showRememberMe: false,
      rememberMeText: '记住我',
      showForgotPassword: false,
      forgotPasswordText: '忘记密码？',
      showSocialLogin: false,
      showGoogleLogin: false,
      showGithubLogin: false,
      showRegisterLink: false,
      registerPrefixText: '还没有账号？',
      registerText: '立即注册',
      submitText: '登录',
      loadingText: '登录中...',
    },
  },
  {
    name: '社交',
    icon: '🌐',
    config: {
      usernameLabel: '邮箱地址',
      usernamePlaceholder: '请输入邮箱地址',
      usernameIcon: '📧',
      passwordLabel: '密码',
      passwordPlaceholder: '请输入密码',
      passwordIcon: '🔒',
      showRememberMe: true,
      rememberMeText: '记住我',
      showForgotPassword: true,
      forgotPasswordText: '忘记密码？',
      showSocialLogin: true,
      showGoogleLogin: true,
      showGithubLogin: true,
      showRegisterLink: true,
      registerPrefixText: '还没有账号？',
      registerText: '立即注册',
      submitText: '登录',
      loadingText: '登录中...',
    },
  },
  {
    name: '企业',
    icon: '🏢',
    config: {
      usernameLabel: '工号',
      usernamePlaceholder: '请输入工号',
      usernameIcon: '🆔',
      passwordLabel: '密码',
      passwordPlaceholder: '请输入密码',
      passwordIcon: '🔒',
      showRememberMe: false,
      rememberMeText: '记住我',
      showForgotPassword: true,
      forgotPasswordText: '忘记密码？',
      showSocialLogin: false,
      showGoogleLogin: false,
      showGithubLogin: false,
      showRegisterLink: false,
      registerPrefixText: '还没有账号？',
      registerText: '立即注册',
      submitText: '登录',
      loadingText: '登录中...',
    },
  },
]

// 代码预览
const formCode = computed(() => {
  return `<LoginForm
  :username-label="${formConfig.usernameLabel}"
  :username-placeholder="${formConfig.usernamePlaceholder}"
  :username-icon="${formConfig.usernameIcon}"
  :password-label="${formConfig.passwordLabel}"
  :password-placeholder="${formConfig.passwordPlaceholder}"
  :password-icon="${formConfig.passwordIcon}"
  :show-remember-me="${formConfig.showRememberMe}"
  :remember-me-text="${formConfig.rememberMeText}"
  :show-forgot-password="${formConfig.showForgotPassword}"
  :forgot-password-text="${formConfig.forgotPasswordText}"
  :show-social-login="${formConfig.showSocialLogin}"
  :show-google-login="${formConfig.showGoogleLogin}"
  :show-github-login="${formConfig.showGithubLogin}"
  :show-register-link="${formConfig.showRegisterLink}"
  :register-prefix-text="${formConfig.registerPrefixText}"
  :register-text="${formConfig.registerText}"
  :submit-text="${formConfig.submitText}"
  :loading-text="${formConfig.loadingText}"
  :loading="loading"
  @submit="handleSubmit"
  @forgot-password="handleForgotPassword"
  @google-login="handleGoogleLogin"
  @github-login="handleGithubLogin"
  @register="handleRegister"
/>`
})

// 添加事件日志
const addLog = (message: string, type: string = 'info') => {
  const time = new Date().toLocaleTimeString()
  eventLogs.value.unshift({ time, message, type })
  if (eventLogs.value.length > 20) {
    eventLogs.value.pop()
  }
}

// 清空日志
const clearLogs = () => {
  eventLogs.value = []
}

// 获取日志样式类
const getLogClass = (type: string) => {
  const classMap = {
    success: 'alert-success',
    error: 'alert-error',
    warning: 'alert-warning',
    info: 'alert-info',
  }
  return classMap[type] || 'alert-info'
}

// 加载预设
const loadPreset = (preset: any) => {
  Object.assign(formConfig, preset.config)
  addLog(`加载预设: ${preset.name}`, 'success')
}

// 模拟错误
const simulateError = () => {
  if (loginFormRef.value) {
    loginFormRef.value.setError('用户名或密码错误，请重试')
    addLog('模拟错误: 用户名或密码错误', 'error')
  }
}

// 清除错误
const clearError = () => {
  if (loginFormRef.value) {
    loginFormRef.value.clearError()
    addLog('清除错误信息', 'info')
  }
}

// 事件处理
const handleFormSubmit = async (data: any) => {
  addLog(`表单提交: ${JSON.stringify(data)}`, 'info')
  formLoading.value = true

  // 模拟异步登录
  setTimeout(() => {
    formLoading.value = false
    addLog('登录成功', 'success')

    // 重置表单
    if (loginFormRef.value) {
      loginFormRef.value.resetForm()
    }
  }, 2000)
}

const handleForgotPassword = () => {
  addLog('忘记密码点击', 'warning')
}

const handleGoogleLogin = () => {
  addLog('Google登录点击', 'info')
}

const handleGithubLogin = () => {
  addLog('GitHub登录点击', 'info')
}

const handleRegister = () => {
  addLog('注册链接点击', 'info')
}
</script>

<style scoped>
.login-form-demo-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* 代码块样式 */
.mockup-code {
  background: hsl(var(--b2));
  border-radius: 0.5rem;
  overflow: hidden;
}

.mockup-code pre {
  background: transparent;
  padding: 1rem;
  margin: 0;
  overflow-x: auto;
}

.mockup-code code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--bc));
}

/* 事件日志样式 */
.alert-sm {
  padding: 0.5rem;
  font-size: 0.75rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-form-demo-page {
    padding: 1rem;
  }

  .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}
</style>
